<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>点名系统</title>
    <style type="text/css">
        * {
            font-family: "微软雅黑";
            /*transition-duration: ;*/
        }

        h1,
        h2 {
            animation: changeColor 2s linear infinite;
            animation-direction: alternate;
        }

        h1 {
            background-color: yellowgreen;
            color: white;
            text-align: center;
        }

        #content>div {
            float: left;
            width: 100px;
            height: 50px;
            margin: 5px;
            font-size: 20px;
            line-height: 50px;
            text-align: center;
        }

        .cell {
            background-color: black;
            color: white;
        }

        .current {
            background-color: greenyellow;
            color: blueviolet;
        }

        button {
            display: inline-block;
            height: 50px;
            /*width: 50px;*/
            background-color: yellowgreen;
            color: white;
            font-size: 16px;
            margin: 10px;
        }

        select {
            display: inline-block;
            height: 30px;
            width: 100px;
            border: 1px solid yellowgreen;
            background-color: blanchedalmond;
            color: black;
            font-size: 14px;
            margin: 10px;
        }

        @keyframes changeColor {
            from {
                color: pink;
            }

            to {
                color: blueviolet;
            }
        }
    </style>
</head>

<body>
    <h1>点名系统</h1>
    <h2 id="selectTitle">被选中的小伙伴：</h2>
    <button onclick="go()">开始</button>
    时间：
    <select id="sele">
        <option value="10" selected>10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
        <option value="50">50</option>
    </select>

    <div id="content"></div>
</body>

<script src="./index.js"></script>

</html>